<template>
  <div class="yingmoo-memberindent">
    <header class="header">
      <p><img src="../assets/ym-member/home.png" /> 鹰目网首页
        <span class="register">{{user.contentUser}}
          <img src="../assets/ym-header/arrows.png" /></span>
        <span class="out" @click="confirmExit">退出</span>
        <a href="../#/ymMemberdefault"><span class="member">会员中心</span></a>
        <a href="../#/ymMemberneedlist">
        <span class="mean">我的需求
          <img src="../assets/ym-header/arrows.png" />
        </span>
        </a>
        <a href="../#/ymMemberorder">
        <span class="serve">我的订单
          <img src="../assets/ym-header/arrows.png" />
        </span>
        </a>
        <a href="../#/ymAttentionmedia">
        <span class="serve">关注中心
          <img src="../assets/ym-header/arrows.png" />
        </span>
        </a>
        <a href="../#/ymMembershop">
        <span class="serve">店铺管理
          <img src="../assets/ym-header/arrows.png" />
        </span>
        </a>
        <span class="tel">客服热线</span>
        <span class="num">
			    <img src="../assets/ym-header/phone.png" class="tel_img" />400 650 7893</span>
      </p>
    </header>
    <div class="yingmoo-memberbanner">
      <div class="yingmoo-logo">
      	<a href="../#/">
        	<img src="../assets/ym-member/yingmoo-logo.png" />
				</a>        
      </div>
    </div>
    <div class="current-position">
      <p class="position">当前位置：<span>账号管理></span><span>订单中心></span><span>订单详情</span></p>
      <div class="current-indent">
        <div class="indent-left">
          <p>订单编号：<span>{{orderNum}}</span></p>
          <p v-if="orderStatus == 0">待处理</p>
          <p v-if="orderStatus == 1">处理中</p>
          <p v-if="orderStatus == 2">已完成</p>
          <p v-if="orderStatus == 4">已删除</p>
        </div>
        <div class="indent-right">
          <p>订单状态</p>
          <el-steps :active="1" align-center>
            <el-step title="提交订单"></el-step>
            <el-step title="待确认"></el-step>
            <el-step title="执行中"></el-step>
            <el-step title="上传合同"></el-step>
            <el-step title="完成"></el-step>
          </el-steps>
        </div>
      </div>
<!--   订单流程   -->
      <div class="indent-flow">
        <p class="flow-title">订单流程</p>
        <div class="flow-content">
          <div style="" class="plug-in">
            <el-steps direction="vertical">
              <el-step v-for="ope in operate" :key="ope"></el-step>
            </el-steps>
          </div>
          <div class="flow-right">
            <div class="flow-text" v-for="ope in operate" :key="ope">
              <p><span>{{ope.operateTime}} &nbsp;&nbsp;{{ope.orderStatus}}</span></p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="indent-details">
      <p class="details-title">订单详情</p>
      <div class="details">
        <h3>买家信息</h3>
        <p>用户名：<span class="message">{{buyer.content_user}}</span>联系电话：<span class="message">{{buyer.mobile}}</span>联系人：<span class="message">{{buyer.content_name}}</span>公司名称：<span class="message">{{buyer.content_corp}}</span></p>
        <h3>买家留言</h3>
        <p v-for="message in leaveMessage" :key="message">{{message.createTime}}&nbsp;&nbsp;{{message.messageContent}}</p>
        <!--<h3>卖家信息</h3>
        <p>公司名称：<span>某公司名称</span>联系电话：<span>13522622767</span>联系人：<span>田嬷嬷</span>公司所在城市：<span>上海市莆田区</span></p>-->
        <h3>订单信息</h3>
        <p>订单编号：<span>{{orderNum}}</span>合同上传时间：<span></span>创建时间：<span></span>执行时间：<span></span></p>
      </div>
    </div>
    <div class="indent-list">
      <ul class="indent-head">
        <li>媒体名称/媒体分类</li>
        <li>规格</li>
        <li>投放周期</li>
        <li>排气/执行时间</li>
        <li>状态</li>
        <li>执行价格</li>
      </ul>
      <div class="indent-odd" v-for='media in mediaInfo' :key="media">
        <div class="one">
          <div class="one-div">
          	<a :href="media.linkUrl" target="_blank">
	            <img width="180px" height="117px" :src="media.cover" />
          	</a>
          </div>
          <div class="two-div">
            <a :href="media.linkUrl" target="_blank"><h1>{{media.mediaName}}</h1></a>
            <p>{{media.category}}</p>
            <p>{{media.area}}</p>
            <p>{{media.companyName}}</p>
          </div>
        </div>
        <div class="two">
          <p>{{media.width}}m * {{media.height}}m</p>
        </div>
        <div class="three">
          <p>{{media.cycle}}</p>
        </div>
        <div class="for">
          <p>{{media.start_time}} 至 {{media.end_time}}</p>
        </div>
        <div class="five">
          <p v-if="media.status == 0">待处理</p>
          <p v-if="media.status == 1">处理中</p>
          <p v-if="media.status == 2">已完成</p>
          <p v-if="media.status == 4">已删除</p>
        </div>
        <div class="six">
          <p>{{media.final_price}}</p>
          <p>{{media.priceUnit}}</p>
        </div>
      </div>
      <div class="indent-foot">
        <p>订单总金额：<span>0.00</span>元</p>
      </div>
    </div>
<!--  推荐媒体  -->
    <!--<div class="recommend-media">
      <h3>推荐媒体</h3>
      <div class="recommend-model">
        <div class="model" v-for="lastest in lastest">
          <img src="../assets/ym-member/model-img.png" />
          <h2>{{lastest.name}}</h2>
          <p class="money">{{lastest.price}}</p>
          <p class="place">{{lastest.remark}}<span>{{lastest.look}}</span></p>
        </div>
      </div>
    </div>-->
<!--  底部  -->
    <div class="footer-bar">
      <div class="footer-bg">
        <div class="w1200 footer-about clearfix">
          <ul>
            <h5>关于</h5>
            <li><a href="javascript:;">关于我们</a></li>
            <li><a href="javascript:;">加入我们</a></li>
            <li><a href="javascript:;">团队</a></li>
          </ul>
          <ul>
            <h5>服务</h5>
            <li><a href="javascript:;">服务条款</a></li>
            <li><a href="javascript:;">隐私协议</a></li>
          </ul>
          <ul>
            <h5>产品</h5>
            <li><a href="javascript:;">如何使用</a></li>
            <li><a href="javascript:;">视频介绍</a></li>
            <li><a href="javascript:;">更新历史</a></li>
            <li><a href="javascript:;">FAQ</a></li>
          </ul>
          <div class="we">
            <h5>关注我们</h5>
            <p class="icons">
              <a href="javascript:;"><img src="../assets/ym-footer/icon-wb.png" /></a>
              <a href="javascript:;"><img src="../assets/ym-footer/icon-wx.png" /></a>
              <a href="javascript:;"><img src="../assets/ym-footer/icon-qq.png" /></a>
            </p>
            <p class="text">鹰目户外广告网是中国最大的户外广告投放平台，户外媒体行业服务平台。鹰目网秉承以 “为客户提供有价值的服务” 为宗旨，围绕 “做专” “做专业” “做精细” 的服务方针，坚持 “只做服务商” 的经营理念，致力于以顾问形式，服务于户外广告买卖双方。</p>
          </div>
        </div>
      </div>
      <div class="footer-copyright">
        <div class="w1200">
          <div class="copyright">
            <p>
              <span>Copyright @ 2012-2017</span>
              <span>北京鹰目网络科技有限公司</span>
              <span>京ICP备14044439号-1</span>
              <img src="../assets/ym-footer/icon-g.png" />
              <span>京公网安备 11010802020633号</span>
            </p>
            <p>
              <span>地址：北京市海淀区上地东路35号颐泉汇大厦D座5层</span>
              <span>热线：400 650 7893</span>
              <span>传真：010-62681689/8248335</span>
            </p>
          </div>
          <div class="safety clearfix">
              <a href="javascript:;"><img src="../assets/ym-footer/safe-360.png" /></a>
              <a href="javascript:;"><img src="../assets/ym-footer/safe-kexin.png" /></a>
              <a href="javascript:;"><img src="../assets/ym-footer/safe-aqlm.png" /></a>
          </div>
        </div>
        </div>
    </div>
  </div>
</template>
<script>
  export default {
    name: "yingmoo-memberindent",
    data() {
      return {
      	operate:[],
      	orderNum:'',
      	mediaInfo:[],
      	user:{},
      	buyer:{},
      	orderStatus:'1',
      	leaveMessage:[],
      	orderMediaInfo:{},
      	requestAddr:this.GLOBAL.addr,
        text: [{
          textheadline: '媒体标题媒体标题媒体标题',
          texttype: '机场媒体',
          textfrom: '灯箱',
          textlocation: '北京',
          textplace: '海淀区',
          textname: '媒体主公司名称',
          textsize: '13m*9m',
          textdeadline: '月',
          texttime: '2017-11-23 至 2017-11-23',
          textoriginal: '￥880000.00',
          textprice: '￥880000.00',
          textstate: '待确定'
        }],
        lastest: [{
          name: '媒体名称媒体名称媒体名称',
          price: '价格：120万 元/年',
          remark: '北京西站',
          look: '看板'
        }, {
          name: '媒体名称媒体名称媒体名称',
          price: '价格：120万 元/年',
          remark: '北京西站',
          look: '看板'
        }, {
          name: '媒体名称媒体名称媒体名称',
          price: '价格：120万 元/年',
          remark: '北京西站',
          look: '看板'
        }, {
          name: '媒体名称媒体名称媒体名称',
          price: '价格：120万 元/年',
          remark: '北京西站',
          look: '看板'
        }, {
          name: '媒体名称媒体名称媒体名称',
          price: '价格：120万 元/年',
          remark: '北京西站',
          look: '看板'
        },{
          name: '媒体名称媒体名称媒体名称',
          price: '价格：120万 元/年',
          remark: '北京西站',
          look: '看板'
        }, {
          name: '媒体名称媒体名称媒体名称',
          price: '价格：120万 元/年',
          remark: '北京西站',
          look: '看板'
        }, {
          name: '媒体名称媒体名称媒体名称',
          price: '价格：120万 元/年',
          remark: '北京西站',
          look: '看板'
        }, {
          name: '媒体名称媒体名称媒体名称',
          price: '价格：120万 元/年',
          remark: '北京西站',
          look: '看板'
        }, {
          name: '媒体名称媒体名称媒体名称',
          price: '价格：120万 元/年',
          remark: '北京西站',
          look: '看板'
        }]
      }
    },
    mounted(){
    	this.getOperates();
    },
    methods:{
    	getOperates(){
    		var orderNum = sessionStorage.getItem("orderNum");
    		var cartId = sessionStorage.getItem("cartId");
    		this.orderNum = orderNum;
    		this.user = JSON.parse(localStorage.getItem("user"))
    		console.log(this.user)
    		this.$http.post(this.requestAddr+"/Login/getUserInfo",{"userId":this.user.autoId,"cartId":cartId},{emulateJSON:true}).then(
    			(res)=>{
    				this.buyer = res.data.buyer;
    				this.leaveMessage = res.data.messageList;
    				this.mediaInfo = res.data.mediaInfo;
    				for(var i=0; i<(this.mediaInfo).length; i++){
            	var startTime = (this.mediaInfo[i].start_time).toString();
            	var endTime = (this.mediaInfo[i].end_time).toString();
            	this.mediaInfo[i].start_time = startTime.substring(0,10);
            	this.mediaInfo[i].end_time = endTime.substring(0,10);
            	
            	this.mediaInfo[i].status = this.orderStatus;
            	var date = new Date(this.mediaInfo[i].create_time);
            	var month = (date.getMonth()+1)<10 ? '0'+ (date.getMonth()+1):(date.getMonth()+1)
    					var dd = date.getDate()<10 ? '0'+ date.getDate():date.getDate()
		          var str=date.getFullYear() + '/' + month + '/' + dd
            	this.mediaInfo[i].create_time = str;
            	
            	this.mediaInfo[i].linkUrl = "http://172.16.10.4:7000/html/mediaData/"+this.mediaInfo[i].create_time+"/"+this.mediaInfo[i].mediaId+".html";
            }
    			}
    		)
    		this.$http.post(this.requestAddr+"/GetJson/getOperate",{"orderNum":orderNum},{emulateJSON:true}).then(
    			(res)=>{
    				this.operate = res.data.operates
    			}
    		)
    	},
    	confirmExit:function(){
			this.$confirm('确认退出登录吗？', '确认退出', {
		      confirmButtonText: '确定',
		      cancelButtonText: '取消',
		      type: 'warning' 
	    }).then(
	    	()=>{
	        	localStorage.removeItem("user")
						this.user = null
						this.flag = false
						window.location.href = '../#/'
	    	}
	    )
		}
    }
  }

</script>
<style scoped>
  .el-steps {
    margin-top: 30px;
    margin-left: 130px;
  }

</style>
<style scoped lang="less">
  .yingmoo-memberindent {
    width: 100%;
    background-color: #f3f9ff;
    .header {
      width: 100%;
      height: 45px;
      background-color: #e6e6e6;
      p {
        width: 1200px;
        margin: 0 auto;
        line-height: 45px;
        font-size: 12px;
        color: #666666;
        .out {
          color: #f29600;
          margin-left: 8px;
          cursor: pointer;
        }
        .register {
          margin-left: 100px;
        }
        .member {
          margin-left: 270px;
          padding: 0 5px 1px 5px;
          width: 99px;
          height: 22px;
          background-color: #f29600;
          color: white;
        }
        .serve {
          margin-right: 15px;
          img {
            padding-left: 5px;
          }
        }
        .tel {
          margin-left: 70px;
        }
        .tel_img {
          padding-left: 5px;
          padding-right: 5px;
        }
        .num {
          font-weight: bold;
          color: #f29600;
        }
      }
    }
    .yingmoo-memberbanner {
      width: 100%;
      height: 62px;
      background-color: #036eb7;
      margin: 0 auto;
      .yingmoo-logo {
        width: 1200px;
        margin: 0 auto;
        img {

          margin-top: 9.5px;
        }
      }
    }
    .current-position {
      width: 1200px;
      margin: 0 auto;
      margin-top: 24px;
      .position {
        width: 1182px;
        line-height: 38px;
        font-size: 14px;
        color: #666666;
        background-color: #f2f2f2;
        padding-left: 18px;
        span {
          &:nth-child(3) {
            color: #036eb7;
          }
        }
      }
      .current-indent {
        width: 100%;
        height: 140px;
        background-color: white;
        display: flex;
        .indent-left {
          width: 400px;
          background-image: url(../assets/ym-member/cut-off-rule.png);
          background-repeat: no-repeat;
          background-position: right;
          padding-top: 21px;
          padding-left: 21px;
          p {
            font-size: 14px;
            color: #666666;
            &:nth-child(2) {
              font-size: 18px;
              color: #f29600;
              font-weight: bold;
              margin-top: 31px;
              margin-left: 107px;
            }
          }
        }
        .indent-right {
          width: 660px;
          p {
            margin-left: 62px;
            margin-top: 20px;
            font-size: 14px;
            color: #666666;
          }
        }
      }
      .indent-flow {
        width: 1200px;
        height: 455px;
        background-color: white;
        .flow-title {
          width: 1182px;
          line-height: 38px;
          font-size: 14px;
          color: #666666;
          background-color: #f2f2f2;
          padding-left: 18px;
        }
        .flow-content {
          display: flex;
          .plug-in {
            position: relative;
            left: -90px;
          }
          .flow-right {
            position: relative;
            left: -75px;
            .flow-text {
              margin-top: 35px;
              p {
                color: #409EFF;
                line-height: 30px;
              }

              &:nth-child(1) {
                margin-top: 55px;
              }
            }
          }

        }
      }
    }
    .indent-details {
      height: 425px;
      margin: 0 auto;
      width: 1200px;
      height: 455px;
      background-color: white;
      .details-title {
        width: 1182px;
        line-height: 38px;
        font-size: 14px;
        color: #666666;
        background-color: #f2f2f2;
        padding-left: 18px;
      }
      .details {
        padding-left: 41px;
        padding-top: 35px;
        h3 {
          font-weight: bold;
          margin-bottom: 10px;
          font-size: 16px;
          color: #333333;
        }
        p {
          width: 890px;
          padding-left: 50px;
          margin-bottom: 20px;
          font-size: 14px;
          line-height: 40px;
          color: #666666;
          span {
            padding-right: 75px;
          }
          .message {
            padding-right: 45px;
          }
        }
      }
    }

    .indent-list {
      width: 1200px;
      margin: 0 auto;
      background-color: white;
      .indent-head {
        width: 1200px;
        height: 42px;
        font-size: 16px;
        display: flex;
        background-color: #f2f2f2;
        li {
          text-align: center;
          line-height: 42px;
          color: #666666;
          &:nth-child(1) {
            width: 474px;
          }
          &:nth-child(2) {
            width: 171px;
          }
          &:nth-child(3) {
            width: 111px;
          }
          &:nth-child(4) {
            width: 218px;
          }
          &:nth-child(5) {
            width: 116px;
          }
          &:nth-child(6) {
            width: 164px;
          }
        }
      }
      .indent-odd {
        display: flex;
        height: 142px;
        border-bottom: 2px solid #1578bc;
        .one {
          width: 474px;
          display: flex;
          align-items: center;
          background-image: url(../assets/ym-member/cut-off-rule.png);
          background-repeat: no-repeat;
          background-position: right;
          .one-div {
            img {
              margin-left: 50px;
            }
          }
          .two-div {
            width: 185px;
            font-size: 14px;
            line-height: 32px;
            padding-left: 30px;
            h1 {
              font-weight: bold;
              margin-top: 10px;
              white-space:nowrap;
			  			overflow:hidden;
			  			text-overflow:ellipsis;
            }
            p {
              color: #999999;
            }
          }
        }
        .two {
          width: 171px;
          line-height: 142px;
          background-image: url(../assets/ym-member/cut-off-rule.png);
          background-repeat: no-repeat;
          background-position: right;
          p {
            color: #999999;
            font-size: 14px;
            text-align: center;
          }
        }
        .three {
          width: 111px;
          background-image: url(../assets/ym-member/cut-off-rule.png);
          background-repeat: no-repeat;
          background-position: right;
          p {
            width: 100%;
            font-size: 14px;
            color: #999999;
            text-align: center;
            line-height: 142px;
          }
        }
        .for {
          width: 218px;
          color: #999999;
          font-size: 14px;
          line-height: 142px;
          text-align: center;
          background-image: url(../assets/ym-member/cut-off-rule.png);
          background-repeat: no-repeat;
          background-position: right;
        }
        .five {
          width: 116px;
          text-align: center;
          color: #999999;
          font-size: 14px;
          line-height: 142px;
          background-image: url(../assets/ym-member/cut-off-rule.png);
          background-repeat: no-repeat;
          background-position: right;
        }
        .six {
          width: 164px;
          background-image: url(../assets/ym-member/cut-off-rule.png);
          background-repeat: no-repeat;
          background-position: right;
          p {
            text-align: center;
            &:nth-child(1) {
              text-decoration: line-through;
              color: #999999;
              margin-top: 33px;
              line-height: 50px;
            }
            &:nth-child(2) {
              color: #f39e26;
              font-weight: bold;
            }
          }
        }
      }
      .indent-foot {
        width: 1200px;
        height: 63px;
        p {
          margin-left: 950px;
          line-height: 63px;
          color: #999999;
          font-size: 16px;
          span {
            color: #f29600;
          }
        }
      }
    }
    .recommend-media{
      width: 1200px;
      margin: 0 auto;
      margin-top: 20px;
      h3{
        font-size: 14px;
        color: #1478bc;
        border-bottom: 2px solid #1478bc;
        line-height: 26px;
        font-weight: bold;
      }
      .recommend-model{
        width: 1200px;
        height: 540px;
        .model{
          width: 224px;
          height: 235px;
          background-color: white;
          margin-top: 20px;
          margin-left: 20px;
          float: left;
          &:nth-child(1){
            margin-left: 0;
          }
          &:nth-child(6){
            margin-left: 0;
          }
          h2{
            font-size: 16px;
            color: #333333;
            padding-left: 15px;
            line-height: 25px;padding-top: 5px;
          }
          p{
            font-size: 14px;
            padding-left: 15px;
            line-height: 25px;
          }
          .money{
            color: #f29600;
          }
          .place{
            color: #999999;
            span{
              padding-left: 12px;
            }
          }
        }
      }
    }



    .footer-bar {
      .w1200 {
        width: 1200px;
        margin: 0 auto;
        padding-left: 16px;
        padding-right: 16px;
      }

      .footer-bg {
        height: 240px;
        background-color: #f3f9ff;
        /*    background: linear-gradient(to bottom, #c6dbed 0%,#f3f9ff 100%);*/
        background-image: url(../assets/ym-footer/ymDetailsfooter-bg.png);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: top center;
      }
      .footer-about {
        margin-top: 30px;
        h5 {
          &:extend(.footer-links h5);
        }
        ul {
          width: 180px;
          float: left;
          h5 {
            padding-top: 35px;
            padding-bottom: 20px;
            color: #f29600;
            font-weight: bold;
            font-size: 18px;
          }
          li {
            &:extend(.footer-links p);
            line-height: 36px;
            a {
              font-size: 16px;
              color: white;
              &:extend(.footer-links p a);
            }
          }
        }
        .we {
          float: right;
          width: 520px;
          h5 {
            font-size: 18px;
            padding-top: 35px;
            color: #f29600;
            font-weight: bold;
          }
          .icons {
            padding-top: 15px;
            padding-bottom: 8px;
            a {
              margin-right: 22px;
            }
          }
          .text {
            color: white;
            line-height: 28px;
            margin-right: 0;
            font-size: 16px;
          }
        }
      }

      .footer-copyright {
        height: 108px;
        background: #1a1a1a;
        .w1200 {
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: space-between;
        }
        .copyright {
          color: #fff;
          font-size: 14px;
          line-height: 30px;
          p {
            display: flex;
            align-items: center;
          }
          span {
            margin-right: 10px;
          }
          img {
            margin-right: 3px;
          }
        }
        .safety a {
          float: left;
          margin-left: 12px;
          img {
            display: block;
          }
        }
      }
    }
  }

</style>
